<template>
	<div class="popup-mask">
		<div class="popup-wrap">
			<div class="dialog-body">
				<div class="dialog-content">
					{{ value }}
				</div>
				<div class="dialog-action-row" v-show="close">
					<div>閉鎖</div>
					<div class="blue">{{ btn }}</div>
				</div>
				<div class="dialog-footer" v-show="!close">
					{{ btn }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'Alert',
		props: {
			value: {
				type: String,
				default: ''
			},
			btn: {
				type: String,
				default: ''
			},
			close: {
				type: Boolean,
				default: false
			},
		}
	})
</script>

<style>
	.blue{
		color: #1677ff;
	}
	
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.55);
	}

	.popup-wrap {
		position: fixed;
		z-index: 1;
		top: 50%;
		left: 50%;
		min-width: 70vw;
		max-width: 90vw;
		width: auto;
		transform: translate(-50%, -50%);
	}

	.dialog-body.active {
		animation: scaleup 0.5s;
	}

	.dialog-body.scaledown {
		animation: scaledown 0.3s;
	}


	@keyframes scaleup {
		0% {
			transform: scale(0)
		}

		100% {
			transform: scale(1)
		}
	}

	/* 元素缩小的动画 */
	@keyframes scaledown {
		0% {
			transform: scale(1)
		}

		100% {
			transform: scale(0)
		}
	}


	.dialog-body {
		width: 100%;
		max-height: 40vh;
		font-size: 14px;
		overflow: hidden;
		display: flex;
		background-color: #fff;
		flex-direction: column;
		padding-top: 20px;
		border-radius: 8px;
	}

	.dialog-content {
		padding: 12px 20px;
		font-size: 14px;
		line-height: 1.4;
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		justify-content: center;
	}

	.dialog-footer , .dialog-action-row{
		display: flex;
		justify-content: center;
		border-top: 0.5px solid #eee;
		line-height: 25px;
		padding: 6px;
		color: #1677ff;
	}

	.dialog-footer:active,.dialog-action-row>div:active {
		background-color: #ebebeb;
	}

	
	.dialog-action-row>div{
		flex: 1;
		text-align: center;
	}
	
	.dialog-action-row>div:last-child{
		border-left: 0.5px solid #eee;
	}
</style>